<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDoctorDetail } from '@/apis/doctor/doctorAPI'
import type { DoctorVO } from '@/apis/doctor/doctorAPI'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

// 获取路由参数
const route = useRoute()
const router = useRouter()
const doctorId = ref<number>(Number(route.params.doctorId) || 0)

// 医生信息
const doctor = ref<DoctorVO>({
  id: 0,
  name: '',
  department: '',
  title: '',
})

// 加载状态
const loading = ref(true)

// 获取医生详情
const fetchDoctorDetail = async () => {
  if (!doctorId.value) {
    ElMessage.error('医生ID不能为空')
    return
  }

  try {
    loading.value = true
    const res = await getDoctorDetail(doctorId.value)
    if (res.status === 200 && res.data) {
      doctor.value = res.data
    } else {
      ElMessage.error('获取医生信息失败')
    }
  } catch (error) {
    console.error('获取医生详情出错:', error)
    ElMessage.error('获取医生信息失败')
  } finally {
    loading.value = false
  }
}

// 处理预约
const handleMakeAppointment = () => {
  router.push({
    path: '/user/user-appointment',
    query: { doctorId: doctorId.value }
  })
}

// 页面加载时获取医生详情
onMounted(() => {
  fetchDoctorDetail()
})

// 计算默认头像
const avatarUrl = computed(() => {
  return doctor.value.avatar
    ? doctor.value.avatar
    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})
</script>

<template>
  <div class="doctor-detail-container">
    <el-card v-loading="loading" class="doctor-detail-card">
      <!-- 返回按钮 -->
      <div class="back-button">
        <el-button @click="router.back()" text>
          <el-icon><arrow-left /></el-icon> 返回
        </el-button>
      </div>

      <!-- 医生基本信息 -->
      <div class="doctor-basic-info">
        <div class="doctor-avatar">
          <el-avatar :size="120" :src="avatarUrl" />
        </div>
        <div class="doctor-info-content">
          <div class="doctor-header">
            <h2 class="doctor-name">{{ doctor.name }}</h2>
            <div class="doctor-title">{{ doctor.title }}</div>
            <div class="doctor-department">{{ doctor.department }}</div>
          </div>

          <div class="doctor-actions">
            <el-button type="primary" size="large" @click="handleMakeAppointment">
              立即预约
            </el-button>
          </div>
        </div>
      </div>

      <!-- 医生详细信息 -->
      <div class="doctor-detail-sections">
        <!-- 个人简介 -->
        <div class="detail-section" v-if="doctor.introduction">
          <h3 class="section-title">个人简介</h3>
          <div class="section-content">{{ doctor.introduction }}</div>
        </div>

        <!-- 专业特长 -->
        <div class="detail-section" v-if="doctor.goodAt">
          <h3 class="section-title">专业特长</h3>
          <div class="section-content">{{ doctor.goodAt }}</div>
        </div>

        <!-- 年龄和性别 -->
        <div class="detail-section" v-if="doctor.age || doctor.sex">
          <h3 class="section-title">基本信息</h3>
          <div class="section-content">
            <span v-if="doctor.age">{{ doctor.age }}岁</span>
            <span v-if="doctor.age && doctor.sex"> | </span>
            <span v-if="doctor.sex">{{ doctor.sex === '1' ? '女' : '男' }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.doctor-detail-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.doctor-detail-card {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.back-button {
  margin-bottom: 20px;
}

.doctor-basic-info {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.doctor-avatar {
  margin-right: 30px;
}

.doctor-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.doctor-header {
  margin-bottom: 20px;
}

.doctor-name {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.doctor-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}

.doctor-department {
  font-size: 16px;
  color: #666;
}

.doctor-actions {
  display: flex;
  justify-content: flex-start;
}

.doctor-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.detail-section {
  margin-bottom: 5px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.section-content {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  white-space: pre-line;
}
</style>
